import React from 'react';
import { Select } from 'antd';

const { Option } = Select;
/**
 * 自定义搜索下拉框
 * @param label 标签
 * @param field 字段名称
 * @param data 选项数据 [{ value: '1', text: 'Demo' }]
 * @param mode 模式 'multiple' | 'tags' | '-'
 * @param placeholder 占位符
 */
export class AxSelectSearch extends React.Component {
  handleChange = val => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(val);
    }
  }

  render() {
    const { field, mode, placeholder, label, data, ...rest } = this.props;

    return (
      <Select
        showSearch
        field={field}
        style={{ width: '100%' }}
        mode={mode ? mode : '-'}
        placeholder={placeholder ? placeholder : `请选择${label}`}
        filterOption={(input, option) =>
          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
        onChange={this.handleChange}
        {...rest}
      >
        {
          data.map((d, idx) => (
            <Option key={idx} value={d.value}>
              {d.text}
            </Option>
          ))
        }
      </Select>
    );
  }
}
